<template>
	<view class="payment-password">
		<uv-navbar title="设置交易密码" autoBack placeholder bgColor="linear-gradient(to bottom, #EAA8AD, #F4D1D1)" />

		<view class="content">
			<uv-cell-group :border="false">
				<uv-cell title="交易密码" :border="false">
					<template #value>
						<uv-input v-model="password" border="none" inputAlign="left" placeholder="请输入6位纯数字交易密码"
							type="number" maxlength="6" />
					</template>
				</uv-cell>

				<uv-cell title="确认密码" :border="false">
					<template #value>
						<uv-input v-model="confirmPassword" border="none" inputAlign="left" placeholder="确认新的6位纯数字交易密码"
							type="number" maxlength="6" />
					</template>
				</uv-cell>

				<uv-cell title="手机号" :border="false">
					<template #value>
						<view class="phone-row">
							<uv-text :text="phone" size="28rpx" color="#666" align="left" class="mr10" />
							<view class="ml-20">
								<uv-button text="发送验证码" size="mini" color="#CC2B24" plain @click="sendSmsCode"
									:disabled="isCounting" />
							</view>
						</view>
					</template>
				</uv-cell>

				<uv-cell title="验证码" :border="false">
					<template #value>
						<uv-input v-model="smsCode" border="none" placeholder="请输入验证码" type="number" maxlength="6" />
					</template>
				</uv-cell>
			</uv-cell-group>
		</view>

		<view class="footer mt-30">
			<tui-button type="danger" width="600rpx" height="70rpx" shape="circle"         @click="submit">确定</tui-button>




		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		computed
	} from 'vue'
	import {
		onLoad
	} from '@dcloudio/uni-app'
	import {
		setPaymentPassword,
		smsSend
	} from '@/api'


	import {
		useUserStore
	} from '@/store'
	const userStore = useUserStore()



	const phone = ref(userStore.userInfo.phone_number) // 从store获取真实手机号
	const password = ref('')
	const confirmPassword = ref('')
	const smsCode = ref('')
	const isCounting = ref(false)
	const countdown = ref(60)

	const payPassModel = reactive({
		new_password: '',
		confirm_password: '',
		phone_number: '',
		code: ''
	})




	// 发送验证码
	const sendSmsCode = async () => {
		if (isCounting.value) return

		// TODO: 调用发送验证码接口
		console.log('发送验证码到:', phone.value)
		await smsSend({
			mobile: phone.value,
			event: 'payment_password'
		})

		isCounting.value = true
		const timer = setInterval(() => {
			countdown.value--
			if (countdown.value <= 0) {
				clearInterval(timer)
				isCounting.value = false
				countdown.value = 60
			}
		}, 1000)
	}

	// 提交设置
	const submit = () => {
		if (!password.value || password.value.length !== 6) {
			return uni.showToast({
				title: '请输入6位数字密码',
				icon: 'none'
			})
		}

		if (password.value !== confirmPassword.value) {
			return uni.showToast({
				title: '两次密码不一致',
				icon: 'none'
			})
		}

		if (!smsCode.value) {
			return uni.showToast({
				title: '请输入验证码',
				icon: 'none'
			})
		}

		payPassModel.code = smsCode.value
		payPassModel.new_password = password.value
		payPassModel.phone_number = phone.value
		payPassModel.confirm_password = confirmPassword.value

		// TODO: 调用设置交易密码接口
		console.log('---提交设置:', payPassModel)
		const {
			result
		} = setPaymentPassword(payPassModel)
		uni.showToast({
			title: '设置成功'
		})
		setTimeout(() => {
			uni.navigateBack()
		}, 1500)
	}

	// 从store获取用户手机号
	onLoad(() => {
		// phone.value = userStore.userInfo.phone
	})
</script>

<style>
	page {
		background-color: #F6F4F7;
	}
</style>

<style lang="scss" scoped>
	.payment-password {
		:deep(.uv-status-bar) {
			background-image: none !important;
			background-color: #EAA8AD !important;
		}

		.uv-cell {
			:deep(.uv-cell__body__content) {
				display: block !important;
				width: 200rpx;
				flex: none;
			}

			:deep(.uv-text__value) {
				color: #999999 !important;
			}

		}





		.uv-button-wrapper {
			margin-left: 80rpx;
		}



		.content {
			padding: 20rpx 30rpx;
			background-color: #FFFFFF;

			.phone-row {
				display: flex;
				align-items: center;
				justify-content: flex-end;

				.uv-text {

					margin-right: 20rpx;
				}
			}
		}

		.footer {
			width: 100%;
			padding: 30upx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
		}
	}
</style>